<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/base.css" rel="stylesheet" />
		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<!-- 头部标题 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">北美票房榜</h1>
		</header>
		
		<!-- 内容主容器 -->
		<div class="mui-content" id="app1">
		
			<!-- 图文电影列表 -->
			<!--下拉刷新容器-->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--数据列表-->
					<!-- <ul class="mui-table-view mui-table-view-chevron"></ul> -->
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell mui-media" v-for="item in movies" :key="item.id" @tap="lookDetail(item.id)">
							<a class="mui-navigate-right">
								<img class="mui-media-object mui-pull-left" :src="item.subject.images.large">
								<div class="mui-media-body">
									{{item.subject.title}}
									<p class='mui-ellipsis'>剧情/战争 <span>{{item.subject.rating.average}}分</span></p>
									<p class='mui-ellipsis'>导演：{{item.subject.directors2}}</p>
									<p class='mui-ellipsis'>主演：{{item.subject.casts2}}</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<script>
			let moviesDeatil;
			mui.plusReady(function() {
			
				moviesDeatil = plus.webview.getWebviewById('mDeatil'); // 详细页的窗口对象
				if (!moviesDeatil) {
					console.log(1);
					// 预加载页面
					moviesDeatil = mui.preload({ // 【预加载】自动创建了窗口，加载了文件
						url: '../pages/moviesDeatil.html',
						id: 'mDeatil' // 这个也是webview的id
					})
				}
			})
			let APP = new Vue({
				el: '#app1',
				data: {
					// 电影列表
					movies: [],
					pn:1
				},
				methods: {
					lookDetail(id) {
					
							// mui.fire(目标窗口的webview,'自定义事件名',{参数列表})
							mui.fire(moviesDeatil, 'getMovie', {
								mid: id
							})
					
							// mui 提供打开窗口的方法
							mui.openWindow({ // 打开窗口之前
								// url: '../pages/moviesDeatil.html'
								id: 'mDeatil'
							});
						}
					}
			});
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						auto: false,
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						contentnomore: '已经到底了...',
						callback: pullupRefresh
					}
				}
			});
			// function pullupRefresh() {
				
			// 	// 豆瓣电影接口
			// 	console.log(111)
			// 	'http://t.yushu.im/v2/movie/in_theaters'
			// 	'http://api.douban.com/v2/movie/in_theaters',
			// 	mui.getJSON('https://m.maoyan.com/ajax/movieOnInfoList',
			// 	{
			// 		start:(APP.pn-1)*10,
			// 		count:10,
			// 		city:'广州',
			// 		// apikey: '0df993c66c0c636e29ecbb5344252a4a'
			// 		apikey:'0df993c66c0c636e29ecbb5344252a4a'
			// 	},
			// 	function(data){	//json对象
			// 		//服务器返回响应，根据响应结果，分析是否登录成功；
					
			// 		// 总数据数量
			// 		let total = data.total;
					
			// 		// let subjects = data.subjects;
			// 		let subjects = data.movieList;
			// 		if(subjects.length>0){
			// 			console.log(JSON.stringify(subjects))
			// 			// 对数据subjects进行相关内容的转换，如：剧情、导演、主演
			// 			let directors;
			// 			let casts;
			// 			subjects.map(function(v){
							
			// 				// 剧情
			// 				v.genres = v.genres.join('/');
							
			// 				// 导演名称
			// 				directors = v.directors;
			// 				let arr = [];
			// 				directors.forEach(function(vv){
			// 					// 数组追加
			// 					arr.push(vv.name);  //  ["管虎","xxx"]
			// 				})
			// 				// 增加多一个导演下标
			// 				v.directors2 = arr.join('/');
							
			// 				// 演员名称
			// 				casts = v.casts;
			// 				let arr2 = [];
			// 				casts.forEach(function(vvv){
			// 					arr2.push(vvv.name);
			// 				})
			// 				// 增加多一个演员下标
			// 				v.casts2 = arr2.join('/');
							
			// 				return v;
			// 			})
						
			// 			// console.log(JSON.stringify(subjects));
						
						
			// 			// 赋值
			// 			APP.movies = APP.movies.concat(subjects);
			// 			// APP.movies = subjects;
			// 			// 页码加1
			// 			APP.pn = APP.pn + 1;
			// 			// 允许上拉加载
			// 			mui('#pullrefresh').pullRefresh().endPullupToRefresh(APP.movies.length>=total?true:false);
			// 		}
			// 	},
			// 	function(xhr,type,errorThrown){
			// 		//异常处理；
			// 		console.log(type);
			// 	});
				
			// }
			
			function pullupRefresh() {
				// 请求豆瓣电影接口 
				/**
				 * https://api.douban.com/v2/movie/us_box?apikey=0df993c66c0c636e29ecbb5344252a4a
				 * http://t.yushu.im/v2/movie/in_theaters//其他人的即将热映接口
				 */
				console.log("hahah");
				mui.getJSON(
					'https://api.douban.com/v2/movie/us_box', {
						// start: (APP.pn - 1) * 10, // 起始记录的下标，第1页第1条记录是 0
						// count: 10, // 每页显示的条数
						// city: '广州',
						apikey: '0df993c66c0c636e29ecbb5344252a4a'
					},
					function(data) { //json对象
						//服务器返回响应，根据响应结果，分析是否登录成功；
						// console.log(JSON.stringify(data));		// 输出json字符串进行调试
			
						let subjects = data.subjects;
						console.log(JSON.stringify(subjects[0]));
						if (subjects.length > 0) {
			
							// 对数据subjects进行相关内容的转换，如：剧情、导演、主演
							let directors = [];
							let casts;
							
							// 总数据数量
							let total = data.total; //获取到的电影总数
							subjects.map(function(v) {
			
								// 剧情
								v.subject.genres = v.subject.genres.join('/');
			
								// 导演名称
								directors = v.subject.directors;
								let arr = [];
								directors.forEach(function(vv) {
									// 数组追加
									arr.push(vv.name); //  ["管虎","xxx"]
								})
								// 增加多一个导演下标
								v.directors2 = arr.join('/');
			
								// 演员名称
								casts = v.subject.casts;
								let arr2 = [];
								casts.forEach(function(vvv) {
									arr2.push(vvv.name);
								})
								// 增加多一个演员下标
								v.casts2 = arr2.join('/');
			
								return v;
							})
			
							console.log(JSON.stringify(subjects));
			
			
							// 赋值(数组应该是追加数组)
							APP.movies = APP.movies.concat(subjects);
			
							// 页码加1
							APP.pn = APP.pn + 1;
			
							// 允许/停止上拉加载
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(APP.movies.length >= total ? true : false);
						}
					},
					function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					});
			
				// 不支持跨域请求
				// mui.ajax('http://api.douban.com/v2/movie/in_theaters',{
				// 	data:{
				// 		start:0,
				// 		count:10,
				// 		city:'广州',
				// 		apikey: '0df993c66c0c636e29ecbb5344252a4a'
				// 	},
				// 	dataType:'json',//服务器返回json格式数据
				// 	type:'get',//HTTP请求类型
				// 	timeout:10000,//超时时间设置为10秒；
				// 	headers:{'Content-Type':'application/json'},	              
				// 	success:function(data){
				// 		//服务器返回响应，根据响应结果，分析是否登录成功；
				// 		alert(data);
				// 	},
				// 	error:function(xhr,type,errorThrown){
				// 		//异常处理；
				// 		console.log(type);
				// 	}
				// });
			}
			
			
			/**
			 * 下拉刷新具体业务实现（加载更多）
			 */
			function pulldownRefresh() {
				// 允许上拉加载
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(false);
				
				// 重置页码为1
				APP.pn = 1;
				
				// 更改数组，清空数组
				APP.movies = [];
				
				// 调用上拉加载函数
				pullupRefresh();
				
			}
			
			
			
		</script>
				
	</body>

</html>
